<template>
  <div class="shop-data">
    <div class="container">
      <div class="bg">
        <image mode="aspectFill" :src="bgImg" alt=""></image>
      </div>
      <div class="header flex align-center space-between">
        <div class="left">成交额(元)</div>
        <div class="right">
          <div class="tab flex align-center">
            <div
              class="tab-item"
              :class="{ active: day === 1 }"
              @click="fnTabChange(1)"
            >
              今日
            </div>
            <div
              class="tab-item"
              :class="{ active: day === -1 }"
              @click="fnTabChange(-1)"
            >
              昨日
            </div>
            <div
              class="tab-item"
              :class="{ active: day === 0 }"
              @click="fnTabChange(0)"
            >
              全部
            </div>
          </div>
        </div>
      </div>
      <div class="money">{{ statisticsData.order_price }}</div>
      <ul class="flex align-center space-between">
        <li>
          <div class="label">访问会员数</div>
          <div class="number">
            {{ statisticsData.visit_member_count }}
          </div>
        </li>
        <li>
          <div class="label">付款订单数</div>
          <div class="number">
            {{ statisticsData.pay_order_count }}
          </div>
        </li>
        <li>
          <div class="label">付款商品数</div>
          <div class="number">
            {{ statisticsData.pay_goods_count }}
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { mediaImage } from "@/utils/source";

export default {
  props: ["day", "statisticsData"],
  data() {
    return {
      bgImg: mediaImage("/static/images/index/bg-card.png"),
    };
  },
  onLoad() {},
  methods: {
    fnTabChange(day) {
      this.$emit("on-change", day);
    },
  },
};
</script>
<style lang="scss" scoped>
ul,
ul li{
  list-style: none;
  margin: 0;
  padding: 0;
}
.shop-data {
  .container {
    background: linear-gradient(107.12deg, #58a5ff 0.9%, #1a66ff 99.34%);
    border-radius: 12rpx;
    padding: 32rpx;
    position: relative;
    .bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .header {
      position: relative;
      z-index: 1;
      .left {
        @include font-16-22;
        color: rgba(255, 255, 255, 0.7);
      }
      .right {
        .tab {
          .tab-item {
            @include font-12-16;
            color: rgba(255, 255, 255, 0.5);
            border-top: 1rpx solid #97bcff;
            border-bottom: 1rpx solid #97bcff;
            width: 80rpx;
            height: 40rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            &:first-child {
              border-top-left-radius: 20rpx;
              border-bottom-left-radius: 20rpx;
              border-left: 1rpx solid #97bcff;
              border-right: 1rpx solid #97bcff;
            }
            &:last-child {
              border-top-right-radius: 20rpx;
              border-bottom-right-radius: 20rpx;
              border-left: 1rpx solid #97bcff;
              border-right: 1rpx solid #97bcff;
            }
            &.active {
              background-color: rgba(255, 255, 255, 0.9);
              color: $color-primary;
              border-color: rgba(255, 255, 255, 0.9);
            }
          }
        }
      }
    }
    .money {
      position: relative;
      z-index: 1;
      margin-top: 16rpx;
      margin-bottom: 40rpx;
      font-weight: 500;
      font-size: 80rpx;
      line-height: 96rpx;
      color: #ffffff;
    }
    ul {
      position: relative;
      z-index: 1;
      li {
        color: #fff;
        .label {
          @include font-14-20;
          color: rgba(255, 255, 255, 0.7);
        }
        .number {
          @include font-20-24;
          font-weight: 500;
          color: #ffffff;
          margin-top: 16rpx;
        }
      }
    }
  }
}
</style>
